<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
</head>
<body>
    <!-- 前端中3种选中形式
     1.js是checked = true
     2.用户选择对号
     3.在标签上添加checked属性 -->

     <form action="">
    <p><input type="checkbox" name="" id="">尼古拉斯赵四</p>
     <p><input type="checkbox" name="" id="">莱昂纳多刘能</p>
     <p><input type="checkbox" name="" id="">约翰尼宋小宝</p>
     <p><input type="checkbox" name="" id="">布拉德小沈阳</p>
     <p><input type="checkbox" name="" id="">刘备</p>
     </form>
<button>全选</button>
<button>全不选</button>
<button>反选</button>

<script>
    let btn = document.getElementsByTagName("button");
    let inp = document.getElementsByTagName("input")
    btn[0].onclick = function(){
        for (let i = 0; i < inp.length; i++) {
            inp[i].checked = true;     
        }

    }

    btn[1].onclick = function(){
        for (let i = 0; i < inp.length; i++) {
            inp[i].checked = false;
            
        }
    }
    btn [2].onclick = function(){
        for (let i = 0; i < inp.length; i++) {
            inp[i].checked = !inp[i].checked;
            
        }
    }

</script>

    
</body>
</html>